<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />		
		<meta name="author" content="" />
		<meta name="last-edit" content="2023.03.15" />
		<title>Form表单提交</title>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
      window.jQuery || document.write(`<script type="text/javascript" src="./libs/jquery2.0.0.min.js">`)
    </script>
		<style type="text/css">
      .error-tip{
        display: inline-block;
        color: red;
      }
		</style>
	</head>
  <body>
    <form id="userinfo" name="userinfo">
      <div>
        <label>用户名</label>
        <input type="text" id="userName" name="userName" class="user">
        <div class="error-tip"></div>
      </div>
      <div>
        <label>用户名2</label>
        <input type="hidden" id="userName2" name="userName2" value="11">
      </div>
      <div>
        <label>密码</label>
        <input type="password" id="pwd" name="pwd">
      </div>
      <div>
        <label>确认密码</label>
        <input type="password" id="pwd2" name="pwd2">
      </div>
      <div>
        <label>邮箱</label>
        <input type="text" id="email" name="email">
      </div>

      
      <input id="ssss1" name="ssss1" type="text">普通输入框</input>
      <input id="ssss2" name="ssss2" type="radio">单选框</input>
      <input id="ssss3" name="ssss3" type="checkbox">复选框</input>
      <input id="ssss4" name="ssss4" type="button">button按钮</input>
      <input id="ssss5" name="ssss5" type="submit">input标签 submit提交按钮</input>
      <button id="ssss6" name="ssss6" type="submit">button标签 submit提交按钮</button>
      </br>
      <input id="ssss7" type="file">上传文件</input>
      </br>



      <button id="ssss" type="text">form内提交</button>
    </form>
    <button id="save" type="text">提交</button>
    <button id="getJSON" type="text">getJSON</button>
    <button id="ajaxGET" type="text">ajaxGET</button>
    

    <script type="text/javascript">
      // 表单提交验证
      $(function(){
        // 获取焦点事件
        $('#userName').focus(function () {
          console.log($(this));
          $(this).select()
        })
        $('#userName').blur(function () {
          if ($(this).val() === '') {
            $(this).css('border', '1px solid red')
            $(this).next('.error-tip').html('用户名不能为空')
          }else{
            $(this).css('border', '1px solid #333333')
            $(this).next('.error-tip').html('')
          }
        })

        // 脱焦事件
        $('#save').click(function() {
          console.log('点击提交按钮');
          console.log($('#userInfo'));
          let userName = $('#userName').val()
          let pwd = $('#pwd').val()
          let pwd2 = $('#pwd2').val()
          let email = $('#email').val()

          // 表单验证
          if (userName === '') {
            $('#userName').css('border', '1px solid red')
            $('#userName').next('.error-tip').html('用户名不能为空')
            return 
          }else{
            $('#userName').css('border', '1px solid #333333')
            $('#userName').next('.error-tip').html('')
          }
          if (pwd === '') {
            console.log(222);
            alert('密码不能为空')
            return 
          }
          if (pwd2 === '') {
            alert('确认密码不能为空')
            return 
          }
          if (pwd !== pwd2) {
            alert('两次输入密码不一致')
            return 
          }
          if (email === '') {
            alert('邮箱不能为空')
            return 
          }

          // Ajax提交
          $.ajax({
            // 请求类型
            type: 'Get',
            url: '/api/user/get?status=1',
            // 是否异步
            async: true,
            // 返回数据类型
            dataType: 'json',
            // 发送数据
            data: {
              userId: 11,
            },
            // 成功回调函数
            success(res){
              console.log(1111, res);
            },
            // 失败回调函数
            error: function(error){
              console.log(2222, error);
              console.log(error.responseText);
            }
          })

          $.ajax({
            // 请求类型
            type: 'POST',
            url: '/api/user/save',
            // 是否异步
            async: true,
            // 返回数据类型
            dataType: 'json',
            // 发送数据
            // data: {
            //   userName: userName,
            //   pwd: pwd,
            //   pwd2: pwd2,
            //   email: email
            // },
            // data缩写
            data: {
              userName,
              pwd,
              pwd2,
              email
            },
            // 成功回调函数
            success(res){
              console.log(1111, res);
            },
            // 失败回调函数
            error: function(error){
              console.log(2222, error);
              console.log(error.responseText);
            }
          })

          // JS form表单提交
          // $('#userInfo').submit(function() {
          //   console.log('from表单提交');
          //   let userName = $('#userName').val()
          //   if (userName === '') {
          //     alert('用户名不能为空')
          //     return false
          //   }
          //   let pwd = $('#pwd').val()
          //   console.log(111);
          //   if (pwd === '') {
          //     console.log(222);
          //     alert('密码不能为空')
          //     return false
          //   }
          //   let pwd2 = $('#pwd2').val()
          //   if (pwd2 === '') {
          //     alert('确认密码不能为空')
          //     return false
          //   }
          //   if (pwd !== pwd2) {
          //     alert('两次输入密码不一致')
          //     return false
          //   }
          //   let email = $('#email').val()
          //   if (email === '') {
          //     alert('邮箱不能为空')
          //     return false
          //   }
          //   return true
          // })
        })
      
        // 表单选择器
        $('#userinfo :input').each(function () {
          console.log($(this).val());
        })

        // serialize 返回序列化数据字符串
        let formStr = $('#userinfo').serialize()
        console.log(formStr);
        // serialize 返回序列化数据数组
        let formArray = $('#userinfo').serializeArray()
        console.log(formArray);

        // $.get()
        // $.post()

        $('#getJSON').click(() => {
          $.getJSON('./json/user1.json', function (res) {
            console.log(res);
            console.log(res.userName);
          })
        })

        $('#ajaxGET').click(() => {
          $.ajax({
            // 请求类型
            type: 'Get',
            url: './json/user1.json',
            // 是否异步
            async: true,
            // 返回数据类型
            dataType: 'json',
            // 发送数据
            data: {
              userId: 11,
            },
            // 成功回调函数
            success(res){
              console.log(1111, res);
            },
            // 失败回调函数
            error: function(error){
              console.log(2222, error);
              console.log(error.responseText);
            }
          })
        })

      })


      function ajaxGet(url, data, succss, error) {
        
      }
    </script>
  </body>
</html>